<template>
  <div class="divider" ref="title" :id="props.id">
    <h3 v-if="level === '1'">
      <span class="vertical-line"></span>{{ props.name }}
      <el-icon :size="20" @click="toggleShow()">
        <ArrowDown />
      </el-icon>
    </h3>
    <h4 v-if="level === '2'">{{ props.name }}</h4>
    <h5 v-if="level === '3'">{{ props.name }}</h5>
  </div>
</template>
<script setup>
// 组件触发的自定义事件
const emit = defineEmits();
// 父组件传参
const props = defineProps({
  name: String,
  id: String,
  own: String,
  level: String
})

// 标题对象
let title = ref();
// 变量定义
let curTitleInfo = reactive({
  id: props.id,
  // 标题名称
  name: props.name,
  // 特有属性
  own: props.own,
  // 标题级别，1:h3，2:h4，3:h5
  level: props.level,
  // 标题高度
  titleHeight: 0,
})

// 挂载
onMounted(async () => {
  // 获取标题部分高度
  getTitleHeight();
})
// 获取标题部分高度
const getTitleHeight = () => {
  curTitleInfo.titleHeight = title.value.offsetTop;
}
// 切换显示隐藏
const toggleShow = () => {
  emit("toggleShow");
}
// 导出方法
defineExpose({
  curTitleInfo,
  getTitleHeight
})
</script>
<style lang="scss" scoped>
.divider {
  //margin: 10px 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  h4 {
    font-size: 16px;
    font-weight: bold;
    color: #107ce5;
  }

  h5 {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }

  .el-divider--vertical {
    margin-right: 10px;
    border-width: 4px;
    border-color: #333;
    height: 20px;
  }

  .secondary-title {
    font-weight: bold;
    font-size: 16px;
  }

  // 竖线
  .vertical-line {
    font-weight: bold;
    font-size: 18px;
    margin-left: 15px;
    margin-right: 10px;
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #fff;
  }

  // 右侧箭头
  .el-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
  }
}
</style>